<template>
  <div class="vy-cmp-group">
    <!-- 分类 - 复用组件 -->
    <a-row type="flex" justify="space-between" align="middle">
      <a-col :span="20">
        <span class="vy-sign"></span>
        <span class="vy-title">{{ title }}</span>
        <a-input
          class="vy-input"
          placeholder="请输入分类名称哦"
          v-model="source.name"
        ></a-input>
      </a-col>
      <a-col :span="2">
        <a-button type="link" @click="click_del_group">删除</a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  name: "vy-cmp-group",
  props: ["title", "index", "source"],
  data() {
    return {};
  },
  methods: {
    // 添加默认的选项
    add_default_option() {
      // 没有选项列表时，追加默认选项
      if (this.source.options && !this.source.options.length) {
        this.source.options.push({
          id: +new Date(),
          name: "内容",
          answer: ""
        });
      }
    },
    // 删除当前作业
    click_del_work() {
      this.$emit("del_work", this.index);
    },
    click_del_group() {
      this.$emit("del_group", this.index);
    }
  }
};
</script>
<style lang="scss">
.vy-cmp-group {
  padding: 10px;
  .vy-sign,
  .vy-title,
  .vy-input {
    display: inline-block;
    vertical-align: middle;
  }
  .vy-sign {
    background: #3366ff;
    border-radius: 1px;
    font-weight: 400;
    color: #3366ff;
    margin-right: 15px;
    width: 5px;
    height: 20px;
  }
  .vy-title {
    margin-right: 10px;
  }
  .vy-input {
    width: 350px;
  }
  .vy-label {
    text-align: right;
    padding-right: 20px;
  }
  .ant-row-flex {
    padding: 5px 10px;
    .ant-btn-link {
      color: #444040;
    }
  }
}
</style>
